<template>
  <div>
    <city-header></city-header>
    <city-search :cities="cityList"></city-search>
    <city-list :hotcity="hotcity"
               :cityList="cityList"
               :letter = "letter"
    ></city-list>
    <city-aside :aside="cityList" @change="cityClickChange"></city-aside>
  </div>
</template>

<script>
  import CityHeader from '@/pages/City/components/Header'
  import CitySearch from '@/pages/City/components/Search'
  import CityList from '@/pages/City/components/List'
  import CityAside from '@/pages/City/components/Aside'
  import  axios from 'axios'
    export default {
        name: "City",
        components:{
              CityHeader,
              CitySearch,
              CityList,
              CityAside
        },
        data(){
          return{
              hotcity:[],
              cityList:{},
              letter:''//定义新的数据(存储点击字母)
          }
        },
        methods:{
         getCityInfo(){//引入数据
           axios.get('/static/makce/city.json').then(this.getSucc)
         },
         getSucc(res){
           res = res.data;
           if(res.ret && res.data){
              const data = res.data;
              this.hotcity = data.hotCities,
              this.cityList = data.cities;
           }
           console.log(res)
         },
         cityClickChange:function(letter){//事件监听
            // console.log(letter)
           this.letter=letter//存储
         }
      },
       mounted(){
           this.getCityInfo()
      }
    }
</script>

<style scoped>

</style>
